<template>
  <div>
    <el-card class="box-card background" style="position: relative;height: 300px">
      <div slot="header" class="clearfix" >
        <span>分类</span>
      </div>
      <div>
        <el-button class="categroy" v-for="(type,index) in typeList" @click="routerLink(type.typeName)" :key="index" type="primary">
          <!--<router-link :to="{name: 'Blogs',params: {typeName: type.typeName}}">-->
          {{type.typeName}}
          <!--</router-link>-->
        </el-button>
      </div>
      <!--<div style="position: absolute;right: 20px;bottom: 20px">
        <el-button @click="addClassification" type="primary">添加分类</el-button>
      </div>-->
    </el-card>
    <div>
      <el-dialog title="添加博客分类" :visible.sync="dialogFormVisible">
        <el-form :model="type">
          <el-form-item label="请输入博客分类名" label-width="130px">
            <el-input v-model="type.typeName" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>

</template>
<script>
import background from '../../assets/css/background.css'
export default {
  name: 'Right',
  props: {
    typeList: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      dialogFormVisible: false,
      type: {
        typeName: '',
        isDeleted: 0
      }
    }
  },
  methods: {
    addClassification () {
      this.dialogFormVisible = true
    },
    submit () {
      this.$axios.post('/type/save', this.type).then(response => {
        this.$message.success('提交成功')
        // this.$parent.typeQuery()
        this.$emit('typeQuery');
      })
      this.dialogFormVisible = false
    },
    routerLink (s) {
      this.type.typeName = s
      // console.log(this.type)
      this.$router.push({
        name: 'Blogs',
        params: { typeName: s }
      })
      // this.$router.push({path:'/typeBlogs/'+s,params:{typeName:s}})
    }
  }
}
</script>
<style>
  .categroy {
    margin-bottom: 4px;
    margin-right: 3px;
  }

</style>
